<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>低代码设计器演示</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f2f5;
    }
    .demo-container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .demo-header {
      background: linear-gradient(135deg, #409eff, #36cfc9);
      color: white;
      padding: 30px;
      text-align: center;
    }
    .demo-header h1 {
      margin: 0;
      font-size: 32px;
      font-weight: 300;
    }
    .demo-header p {
      margin: 10px 0 0 0;
      opacity: 0.9;
    }
    .demo-content {
      padding: 40px;
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }
    .feature-card {
      padding: 24px;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      transition: all 0.3s;
    }
    .feature-card:hover {
      border-color: #409eff;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
      transform: translateY(-2px);
    }
    .feature-icon {
      width: 48px;
      height: 48px;
      background: #409eff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      font-size: 24px;
      color: white;
    }
    .feature-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #303133;
    }
    .feature-desc {
      color: #606266;
      line-height: 1.6;
    }
    .demo-actions {
      text-align: center;
      padding: 20px 0;
      border-top: 1px solid #e6e6e6;
      margin-top: 40px;
    }
    .btn {
      display: inline-block;
      padding: 12px 24px;
      margin: 0 10px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.3s;
      cursor: pointer;
    }
    .btn-primary {
      background: #409eff;
      color: white;
    }
    .btn-primary:hover {
      background: #337ecc;
      transform: translateY(-1px);
    }
    .btn-outline {
      background: white;
      color: #409eff;
      border: 1px solid #409eff;
    }
    .btn-outline:hover {
      background: #409eff;
      color: white;
    }
    .steps {
      margin: 40px 0;
    }
    .steps-header {
      text-align: center;
      margin-bottom: 30px;
    }
    .steps-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    .step-item {
      text-align: center;
      padding: 20px;
    }
    .step-number {
      width: 40px;
      height: 40px;
      background: #409eff;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      font-size: 18px;
      font-weight: 600;
    }
    .step-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #303133;
    }
    .step-desc {
      color: #606266;
      font-size: 14px;
    }
    
    @media (max-width: 768px) {
      .demo-content {
        padding: 20px;
      }
      .feature-grid,
      .steps-list {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="demo-container">
    <div class="demo-header">
      <h1>🎨 低代码可视化页面设计器</h1>
      <p>拖拽式设计，所见即所得，快速构建精美页面</p>
    </div>
    
    <div class="demo-content">
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🧩</div>
          <div class="feature-title">丰富组件库</div>
          <div class="feature-desc">提供20+常用组件，包括基础组件、表单组件、布局组件和数据展示组件，满足各种页面设计需求。</div>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">✨</div>
          <div class="feature-title">可视化设计</div>
          <div class="feature-desc">拖拽式操作，实时预览，支持组件位置调整、大小缩放、属性配置等可视化编辑功能。</div>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <div class="feature-title">高效操作</div>
          <div class="feature-desc">支持键盘快捷键、撤销重做、复制粘贴等高效操作，大幅提升设计效率。</div>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">💾</div>
          <div class="feature-title">数据管理</div>
          <div class="feature-desc">支持本地存储和云端同步，设计成果永不丢失，支持多人协作和版本管理。</div>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">📱</div>
          <div class="feature-title">响应式设计</div>
          <div class="feature-desc">生成的页面自动适配不同屏幕尺寸，确保在各种设备上都有良好的显示效果。</div>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🚀</div>
          <div class="feature-title">一键导出</div>
          <div class="feature-desc">支持导出标准HTML文件，可直接部署到Web服务器，无需额外的构建步骤。</div>
        </div>
      </div>
      
      <div class="steps">
        <div class="steps-header">
          <h2>快速上手</h2>
          <p>4个简单步骤，开始你的设计之旅</p>
        </div>
        <div class="steps-list">
          <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-title">选择组件</div>
            <div class="step-desc">从左侧组件库中选择需要的组件类型</div>
          </div>
          <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-title">拖拽设计</div>
            <div class="step-desc">拖拽组件到画布，调整位置和大小</div>
          </div>
          <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-title">属性配置</div>
            <div class="step-desc">在右侧面板配置组件的各种属性</div>
          </div>
          <div class="step-item">
            <div class="step-number">4</div>
            <div class="step-title">保存导出</div>
            <div class="step-desc">预览效果，保存设计，导出HTML文件</div>
          </div>
        </div>
      </div>
      
      <div class="demo-actions">
        <a href="./index.vue" class="btn btn-primary">开始设计</a>
        <a href="#" class="btn btn-outline">查看文档</a>
      </div>
    </div>
  </div>
  
  <script>
    // 简单的交互效果
    document.addEventListener('DOMContentLoaded', function() {
      // 为卡片添加点击效果
      const cards = document.querySelectorAll('.feature-card');
      cards.forEach(card => {
        card.addEventListener('click', function() {
          this.style.transform = 'scale(0.98)';
          setTimeout(() => {
            this.style.transform = '';
          }, 150);
        });
      });
      
      // 滚动动画
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
          }
        });
      });
      
      // 初始化动画状态
      const animateElements = document.querySelectorAll('.feature-card, .step-item');
      animateElements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = `all 0.6s ease ${index * 0.1}s`;
        observer.observe(el);
      });
    });
  </script>
</body>
</html>